<template>
 <div class="brand">
     <div class="recom-wrap" :img-list="imgList" v-for="(item,index) in imgList" :key="index">
         <div class="title">
             <span>--{{item.title}}--</span>
         </div>
         <ul class="recom-logo">
             <li v-for="(img,index) in item.list" :key="index" >
                 <a href="#">
                     <div class="img">
                         <img :src="img.logo" alt="">
                     </div>
                     <p class="name">{{img.name}}</p>
                     <p class="adress">{{img.adress}}</p>
                 </a>
             </li>
         </ul>
     </div>
 </div>
</template>
 
<script>
export default {
    data(){
        return {
            imgList : []
        }
    },
    async mounted() {
        //请求获取边栏信息
        let result = await this.$http.get({
            url: '/brand/list/main.html',
            params:{
                pet_type:'cat',
                version:'303',
                system:'wap',
                isWeb:1,
                distinct_id:'17685498279c38-070e7217d2903e-6d112d7c-1296000-1768549827abe7',
                _:1608974914994

            }
          })
          this.imgList = result.brand;
    }
}
</script>
 
<style scoped lang = "stylus">
.brand
    padding-bottom: 15px;
    margin-bottom: 10px;
    background: #fff;
    height 6rem
    overflow auto
    .title
        padding-top: 20px;
        font-size: 12px;
        color: #999;
        text-align center
    .recom-logo
        display flex
        flex-wrap wrap
        padding 0 .05rem
        li
            margin-top: 20px;
            width: 33.33%;
            padding: 0 5px;
            height 1.07rem
            a
                display flex
                flex-direction column
                p
                    font-size .12rem
                    text-align center
                    color #999
                    height: .2rem;
                p.name 
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top .05rem
                    color #333
                .img
                    height .62rem
                    width 100%
                    border: 1px solid #e2e2e2;
                    img 
                        display block
                        height .4rem
                        margin 10px auto 0
</style>